<template>
  <!-- 活动打卡页面 -->
  <div class="box">
    <div
      class="clock_text"
      v-show="show"
    >
      暂无打卡记录
    </div>
    <van-row style="background:#fff">
      <p style="padding:15px 15px;font-size:18px">{{obj.name}}</p>
      <ul>
        <li>开始时间：{{obj.start_time}}</li>
        <li>结束时间：{{obj.end_time}}</li>
        <li>活动地点：<i v-if='obj.place==""'>暂时未定</i><i v-else>{{obj.place}}</i></li>
      </ul>
      <p class="clock_personnel"><span>组织人</span><span class="right">{{organizer_list.name}}</span></p>
      <van-tabs
        v-model="active"
        swipeable
        
        title-active-color="#5C97F6"
        color="#4EB5FF"
      >
        <van-tab title="已签到">
          <!-- <p class="clock_complete"></p> -->
          <ul v-for="(it ,i) in list" :key="i">
            <li
              style="padding:10px 0px"
              class="clearfix"
              v-if="it.confirm==1"
            >
              <div class="clock_text left">
                <i  v-if="it.name.length<3">
                   {{((it.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}
                </i>
                <i v-if="it.name.length>=3">
                   {{((it.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}
                </i>
              </div>
              <div class="left">
                <p>{{it.name}}</p>
                <p>{{it.confirm_time}}</p>
              </div>
            </li>
          </ul>
        </van-tab>
        <van-tab title="未签到" v-if="is_show==1">
          <ul v-for="(item ,i) in list" :key="i+'info'">
            <li
              style="padding:10px 0px"
              class="clearfix"
              v-if="item.confirm==0"
            >
                <div class="clock_text left">
                <i  v-if="item.name.length<3">
                   {{((item.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}
                </i>
                <i v-if="item.name.length>=3">
                   {{((item.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}
                </i>
              </div>
              <p
                class="left"
                style="height:45px;line-height:45px"
              >{{item.name}}</p>
            </li>
          </ul>
        </van-tab>
        <van-tab title="签到码" v-if="is_show==1">
          <div class="public_center">
            <p>扫描签到</p>
            <p><img :src="obj.qrcode"></p>
            <p>扫码签到会议</p>
          </div>

          <ul>
            <li>扫码签到的方式</li>
            <li>1.可以在手机上展示二维码，让参会者扫描手机上的二维码。</li>
            <li>2.将签到二维码投屏到大屏幕上，参会者用手机扫描屏幕上的二维码签到。</li>
            <li>3.将签到二维码打印出来，贴出来打印二维码，让参会者扫描签到。</li>
          </ul>
        </van-tab>
      </van-tabs>

    </van-row>
  </div>
</template>

<script type="text/javascript">

import { Row, Tab, Tabs } from "vant";
export default {
  data() {
    return {
      show: false,
      active: 0,
      obj: {},
      list: [],
      organizer_list: {},
      is_show: 0
    };
  },
  created() {
    this.getUserId();
    
  },
  methods: {
     // 自定义名称存储
    async getCustomName() {
      // let corpId = this.$utils.getUrlKey("custid");
       let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getCustomName?corpId=${corpId}`
      );
     if (res.data.errcode == "0000") {
        if (res.data.data.c_name == "") {
          localStorage.setItem("c_name", "C分");
        } else {
          localStorage.setItem("c_name", res.data.data.c_name);
        }
        if (res.data.data.d_name == "") {
          localStorage.setItem("d_name", "D分");
        } else {
          localStorage.setItem("d_name", res.data.data.d_name);
        }
      } else {
        localStorage.setItem("c_name", "C分");
        localStorage.setItem("d_name", "D分");
      }
    },
    async getUserId() {
      let Corp_Id = localStorage.getItem("custid");
      let User_Id = localStorage.getItem("userId");
      let corpId = this.$utils.getUrlKey("custid");
      if(corpId == null || corpId =="undefined"){
        corpId = Corp_Id
      }else{
        localStorage.setItem("custid", corpId);
      }
      let code = '';
      var _this = this;
      if (User_Id && User_Id != "undefined" && User_Id != null) {
        if (Corp_Id != corpId) {
         await dd.runtime.permission.requestAuthCode({
                corpId: corpId,
                onSuccess: function(result) {
                code = result.code
                },
                onFail: function(err) {
                }
              });
          _this.$http
              .get(
                `dingapi/signIn?corpId=${corpId}&code=${code}`
              )
              .then(res => {
                localStorage.setItem("userId", res.data.data.dd_id);
                localStorage.setItem("custid", corpId);
                _this.getCustomName()
                _this.getpunch();
              })
              
        }else{
            _this.getCustomName();
            _this.getpunch();
        }
      } else {
          await dd.runtime.permission.requestAuthCode({
            corpId: corpId,
            onSuccess: function(result) {
              code = result.code
            },
            onFail: function(err) {
            }
          });
          _this.$http
            .get(
              `dingapi/signIn?corpId=${corpId}&code=${code}`
            )
            .then(res => {
              localStorage.setItem("userId", res.data.data.dd_id);
              localStorage.setItem("custid", corpId);
              _this.getCustomName();
              _this.getpunch();
            })
            
      }
    },
    async getpunch() {
      let id = this.$route.query.id;
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let userId = localStorage.getItem("userId");
      let confirm;
      if(this.$route.query.confirm!=undefined){
        confirm= 1;
      }else{
        confirm= 0;
      } 
      const res = await this.$http.get(
        `yuepoints/activity/punch?corpId=${corpId}&userId=${userId}&confirm=${confirm}&id=${id}`
      );
      if (res.data.errcode == "0000") {
        const {
          data,
          is_organizer,
          status,
          userList,
          organizer
        } = res.data.data;
        this.obj = data;
        this.organizer_list = organizer;
        this.list = userList;
        this.is_show = is_organizer;
        if(status==1){
          this.$toast('打卡成功，你已获得'+data.score+'分的奖励');
        }
        if(status==-1){
          this.$toast('打卡时间已过，您已无法进行签到');
        }
      } else if (res.data.errcode == "1101") {
        this.$toast(res.data.errmsg);
      } else if (res.data.errcode == "1102") {
        this.$toast(res.data.errmsg);
      } else if (res.data.errcode == "1103") {
        this.$toast(res.data.errmsg);
      } else if (res.data.errcode == "1104") {
        this.$toast(res.data.errmsg);
      }
    }
  },
  components: {
    [Row.name]: Row,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 16px;
  text-align: left;
  padding-bottom: 50px;
  i {
    font-style: normal;
  }
  p {
    margin: 0px;
  }
  .public_center {
    border-bottom: 2px double silver;
    margin-bottom: 10px;
    text-align: center;
    p {
      margin: 10px 0px;
    }
  }
  .clock_personnel {
    padding: 10px 15px;
    border-top: 1px solid #c0c0c061;
    border-bottom: 1px solid #c0c0c061;
  }
  .clock_complete {
    padding: 10px 15px;
    border-bottom: 1px solid #c0c0c061;
    margin-bottom: 10px;
  }
  ul {
    padding: 0px 15px 15px;
    li {
      padding: 2px 0px;
    }
  }
  .clock_text {
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    background: #59d1ff;
    font-size: 14px;
    // line-height: 42px;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    // padding: 10px 0px;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
